* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;

    &:hover {
        text-decoration: none;
    }
}

// 导航头
.navbar {
    // height: 74px;
    box-shadow: 0 2px 8px #ccc;

    .navbar-brand {
        font-size: 2rem;
    }
}

// home
#home {
    margin-top: #{(74/16)}rem;
    height: 44.5rem;
    background: url(../images/home-bg.jpg) no-repeat;
    background-size: cover;
    color: #fff;
    text-align: center;

    @at-root .mask {
        height: 100%;
        background-color: rgba(0, 0, 0, .6);
        padding: 60px 0;
    }
}

// bbs
#bbs {
    padding: 4rem;

    .box {
        padding: 1rem;
        text-align: center;

        a {
            display: inline-block;
            width: 100%;
            color: #000;

            h3 {
                font-size: 1.75rem;
            }
        }

        &:hover {
            background-color: #f1f1f1;
            box-shadow: 0 0 4px #ccc;
        }
    }
}

// html
#html, #bootstrap {
    background-color: #f8f8f8;
    padding: 4rem 0;
    .mai {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: rgb(64, 210, 177);
        color: #fff;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
    }
}

#bootstrap {
    background-color: #fff;
}

// course
#course {
    background: #f8f8f8;
    padding: 4rem 0;
    h2 {
        text-align: center;
        padding-bottom: 3.75rem;
    }

    .s-card-body {
        display: flex;
        justify-content: center;
    }

    .c-item {
        margin-bottom: 10px;
    }
}

// app
#app {
    padding: 4rem 0;
}

// contact
#contact {
    background: url(../images/contact-bg.jpg) no-repeat;
    color: #fff;
    
}

footer {
    text-align: center;
    padding: 20px;
}